let w=50;
let hs=300;
let h =0;
let wi=1;
let p=0;
//这里添加一个变量
let i = 0;
let l = [];
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(40,188,213);
    frameRate(30);
    //在这里把所有画图的方法都加入进去，注意传入的是函数体 pic0 ,不是 pic0()
    l.push(pic0,pic1,pic2,pic3)
}

function draw() {
    //主要质点１(w,h)
    //质点运动轨迹wh
    if (w > 500) w=50;
    w+=wi;
    h=40*sin(0.033*w)+hs;
    //质点作为原点展开一个坐标系内开质点1.1 w1,h1
    push();
    translate(w,h);
    //1s转一圈
    // p+=2*PI/frameRate()*wi;
    //2s转一圈
    p+=(1*PI/30)*wi;
    rotate(p);
    try{
        l[i](0,0);
    }catch (e) {
        i=0;
        l[i]();
    }
    pop();
//     m = m + mSpeed;
//     n= n+ nSpeed;
//     if (n > 100||n<50){
//         nSpeed = nSpeed*-1;
//     }
// //movement on X axis for balloon
//     if(m>400){
//         m=-75;
//     }
}
//这个函数是p5他认识的一个函数，就就这个名字，改不了，鼠标点击后会发生
//如果你只切换两个图，如下　用boolean 就可以，需要切换n个图，就需要用int了，最好是借助list的index去安排
function mouseClicked(){
    i++;
    // if (i<l.length-1) {
    //     i++;
    // }else {
    //     i=0
    // }
}
function pic0(m,n) {
    background(38,188,213);
    fill(255,0,0);
    ellipse(m, n, 60, 60);
    line(m-25,n+30,m-15,n+60);
    line(m+25,n+30,m+15,n+60);
    fill(255,193,66);
    rect(m-30,n+60,60,30);
}
function pic1(m,n) {
    background(38,188,213);
    fill(255,165,0);
    ellipse(m, n, 90, 70);
    line(m-25,n+30,m-15,n+60);
    line(m+25,n+30,m+15,n+60);
    fill(255,193,193);
    rect(m-30,n+60,60,30);
}
function pic2(m,n) {
    background(38,188,213);
    fill(100,165,0);
    ellipse(m, n, 90, 70);
    line(m-25,n+30,m-15,n+60);
    line(m+25,n+30,m+15,n+60);
    fill(255,193,193);
    rect(m-30,n+60,60,30);
}
function pic3(m,n) {
    background(38,188,213);
    fill(24,44,34);
    ellipse(m, n, 90, 70);
    line(m-25,n+30,m-15,n+60);
    line(m+25,n+30,m+15,n+60);
    fill(255,193,193);
    rect(m-30,n+60,60,30);
}